<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../common/header.jsp" %>
<style>
    body {
        background-color: #f0f0f0;
    }
</style>
<form>
    <div class="row">
        <div class="col-sm-12">

            <div style="width: 100%; position: relative; background: #ffffff; border: 1px solid #cccccc; margin: 80px 0; padding: 40px 15px;">
                <div style = "position: auto">
                <div class="log-icon"></div>
                 	<div style = "margin-top:40px ; margin-left:20px">
   					  <input id="switch-onText" type="checkbox" name="my-checkbox" checked data-on-text="EN" data-off-text="CN">
					</div>               
				</div>
                <h2 class="text-center" style="line-height: 60px; margin-top: -50px; font-size: 24px;">Accounting Change Readiness
                </h2>
                <div class="row">
                    <div class="col-lg-10 col-md-offset-1 mt10 question" id="question-js">
                        <form:form action="/questionnaire/answer/addItemPost" method="post" commandName="question"
                                   role="form" id="question-form-js">
                            <c:if test="${!empty list}">
                                <div class="form-group">
                                    <label for="title-js">Title</label>
                                    <input type="text" class="form-control" id="title-js" required="required"
                                           placeholder="A simple description to your assessment">
                                </div>
                                <p style="margin: 20px 0">To assess the impact of the implementation of new IFRSs on
                                    your organization.</p>
                                <c:forEach items="${list}" var="item" varStatus="num">
                               	    <c:if test="${num.index == 0}">
									   <p style = "font-size:20px; ">IFRS 16</p>
									    <div style = "width:100% ; height: 1px; margin-top :-16px; margin-bottom:10px; background-color:black;"></div> 
									 </c:if>
                               	    <c:if test="${num.index == 11}">
									   <p style = "font-size:20px; ">IFRS 15</p>
									 <div style = "width:100% ; height: 1px; margin-top :-16px; margin-bottom:10px; background-color:black;"></div>
									 </c:if>		
                               	    <c:if test="${num.index == 14}">
									   <p style = "font-size:20px; ">IFRS 9</p>
									     <div style = "width:100% ; height: 1px; margin-top :-16px;  margin-bottom:10px; background-color:black;"></div> 
									 </c:if>									 							 
                                    <div class="list-js ${item.type}">
                                        <p class = "en" style="padding-right: 80px; top:0; position: relative;">
                                                ${num.index+1}. ${item.content}
                                        <span style="position: absolute; width: 70px; right: 0; top:5px;" class="label
                                            <%--<c:if test='${item.impact == "Low"}'>--%>
                                                <%--label-success--%>
                                            <%--</c:if>--%>
                                             <%--<c:if test='${item.impact == "Moderate"}'>--%>
                                                <%--label-warning--%>
                                            <%--</c:if>--%>
                                             <%--<c:if test='${item.impact == "High"}'>--%>
                                                <%--label-danger--%>
                                            <%--</c:if>--%>
                                              label-type label-type-js pull-right"> ${item.impact}</span>                                          
                                        </p>
                                        <p class = "cn" style="padding-right: 80px; top:0; position: relative; display:none">
                                                ${num.index+1}. ${item.chineseContent}          
                                        <span style="position: absolute; width: 70px; right: 0; top:5px;" class="label
                                              label-type label-type-js pull-right"> ${item.impact}</span>                                                                            
                                        </p>          
                                        <div class="radio">
                                            <label>
                                                <input type="radio" title="${item.id}"
                                                       name="optionsRadios${num.index+1}" value="true">
                                                <p class = "en">YES</p>
                                                <p class = "cn" style = "display : none">是</p>
                                            </label>                                         
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" title="${item.id}"
                                                       name="optionsRadios${num.index+1}" value="false">
                                                <p class = "en">NO</p>
                                                <p class = "cn" style = "display : none">否</p>
                                            </label>                                      
                                        </div>
                                    </div>
                                </c:forEach>
                                <button id="next-js" style="width: 150px" type="button"
                                        class="btn btn-primary btn-lg center-block">
                                    next step
                                </button>
                            </c:if>
                        </form:form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<%@ include file="../common/footer.jsp" %>
<script>
	var languageState = false;
	if( window.localStorage.getItem('language') == null){
		 window.localStorage.setItem('language',"en");
	}
	var languageType = window.localStorage.getItem('language');
	initial();
    $(function () {
    	//监听语言切换 switch控件
    	$("[name='my-checkbox']").bootstrapSwitch();
    	$('#switch-onText').on('switchChange.bootstrapSwitch', function(event, state) {
    		  console.log(this); // DOM element
    		  console.log(event); // jQuery event
    		  console.log(state); // true | false
    		  switchLanguage(state);
    		});
    	//        选择题目答案选择是显示红色HIGH 选择否显示绿色
        $('input:radio').click(function(){
            var type = $(this).parents('.list-js').find('.label-type-js');
            if($(this).val() == 'false') {
            	console.log(" input:radio languageState "+languageState);
                type.removeClass('label-danger').removeClass('ifrs').addClass('label-success').html('Low');
            }else{
                type.removeClass('label-success').removeClass('ifrs').addClass('label-danger').html('High');
            }
        });

//        判断是否题目全部填写完成
        function isQuestion(){
            for(var i=0; i<15; i++){
                if($(":radio[name=optionsRadios" + (i+1) + "]:checked").val() == null){
                    return i+1;
                }
            }
        }

        var object = [], data = {}, questionTitleData = [];
//        存储题目
        <c:if test="${!empty list}">
        <c:forEach items="${list}" var="item" varStatus="num">

        questionTitleData[${num.index}] = {};
        questionTitleData[${num.index}] = {
            "id": ${item.id},
            "num": ${num.index+1},
            "content": "${item.content}",
            "chineseContent": "${item.chineseContent}",
            "impact": "${item.impact}"
        }
        </c:forEach>
        </c:if>

        $('#next-js').click(function () {

            if ($('#title-js').val() == '') {
                alert('The title cannot be empty');
                return false;
            }

            var isNum =  isQuestion();
            if(isNum){
                alert("Question " + isNum + " did not complete the answer");
                return false;
            }

            $("#question-form-js input:checked").each(function (i, item) {
                // var a = $(this).ID;
                object[i] = {};
                object[i].id = $(item).attr('title');
                object[i].value = $(item).val();
                object[i].num = i + 1;
            });
            //console.log(object);
            data.content = _.pluck(object, 'value').join(',');  //获取题目答案
            data.question = _.pluck(object, 'id').join(',');     //获取题目ID
            data.type = _.last(window.location.href.split('/'));
            data.title = $('#title-js').val();
            data.userId = '${sessionScope.SESSION_USER_KEY.email}';
            window.Data = {};
//            获取list

            window.localStorage.setItem('questionTitleData', JSON.stringify(questionTitleData));
            window.localStorage.setItem('questionAnswerData', JSON.stringify(data));
            // window.Data.questionData = {title: '${list}', answer: data };
            window.location.href = '/questionnaire/answerConfirm';

        });
    });
    
    //切换到中文
    function switchLanguage(state){
    	if(!state){
       	$(".en").hide();
       	$(".cn").show();
       	window.localStorage.setItem('language', "cn");
    		}else{
        $(".en").show();
        $(".cn").hide();
        window.localStorage.setItem('language', "en");
    	}
    	languageState = state;
    	console.log("languageState "+languageState);
    }
    //初始化语言等
    function initial(){
    	console.log(" window.localStorage.getItem "+ languageType);
    	if(languageType == "cn"){
           	$(".en").hide();
           	$(".cn").show();
           	$("#switch-onText").bootstrapSwitch('state', false);
    	}else{
           	$(".en").show();
           	$(".cn").hide();    		
    	}
    }
</script>